<template>
    <div>
        <h1>computed第二种写法{{ count }}</h1>
        <h1>计算属性:dbCount----{{ dbCount }}</h1>
        <button @click="add">点击我修改数值count</button>
        <button @click="update">点击我修改计算出来dbCountREF对象</button>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
//计数器
const count = ref(10);
//事件回调
const add = () => {
    count.value++;
}
//计算一个数据且是count的2倍
//第二种写法:配置对象
const dbCount = computed({
    //修改dbCount数据的时候
    set(newVal: number) {
        count.value = newVal;
    },
    //获取dbCount数据的时候
    get() {
        //计算数据:当依赖的响应式发生变化从新计算
        return count.value * 2;
    }
});

const update = () => {
    //computed计算属性第二种写法,可以修改计算出来Ref对象数据
    dbCount.value = 44;
}

</script>

<style scoped></style>